<template>
  <div id="main1" ref="EcharRef" class="monitorContainer"/>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  systemScore: {
    type: Array,
    default: () => {
    },
  },
});

const EcharRef = ref(null);
const baseData = ref([]);
const baseTime = ref([]);

watch(props, (val) => {
  setOption();
});

onMounted(() => {
  setOption();
});

const setOption = () => {
  const chartDom = document.getElementById('main1');
  const myChart = echarts.init(chartDom);
  let option = null;
  const data = props.systemScore;
  const arr = [
    data.digestiveSystem,
    data.breathingSystem,
    data.senseSystem,
    data.motionSystem,
    data.urinarySystem,
    data.circulatorySystem,
    data.immuneSystem,
    data.endocrineSystem,
  ];
  let i = -1;
  option = {
    title: {
      text: '不同系统健康指数分布',
      left: 'center',
    },
    radar: {
      shape: 'circle',
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          color: 'rgba(131,141,158,.1)',
        },
      },
      indicator: [
        {name: '消化系统', max: 100, value: arr[0]},
        {name: '呼吸系统', max: 100, value: arr[1]},
        {name: '感官系统', max: 100, value: arr[2]},
        {name: '运动系统', max: 100, value: arr[3]},
        {name: '泌尿系统', max: 100, value: arr[4]},
        {name: '循环系统', max: 100, value: arr[5]},
        {name: '免疫系统', max: 100, value: arr[6]},
        {name: '内分泌系统', max: 100, value: arr[7]},
      ],
      radius: 120,
      axisName: {
        color: '#333',
        lineHeight: 18,
        textAlign: 'center',
        padding: [-5, 0],
        formatter(value, o) {
          return `{a|${o.value}分}\n{b|${value}}`
        },
        rich: {
          a: {
            textAlign: 'center',
          },
          b: {
            fontSize: 14,
            lineHeight: 18,
            textAlign: 'center',
          },
        },
      },

      splitArea: {
        show: false,
        areaStyle: {
          color: 'rgba(255,0,0,0)',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'dashed',
          color: '#d9d9d9',
        },
      },
    },
    series: [
      {
        type: 'radar',
        symbol: 'rect',
        symbolSize: 0,
        data: [
          {
            value: arr,
            name: 'Actual Spending',
            itemStyle: {
              normal: {
                color: 'rgba(255,225,0,0)',
                lineStyle: {
                  color: 'rgba(255,225,0,0)',
                },
              },
            },
            areaStyle: {
              color: 'rgba(86,194,39,0.5)',
            },
          },
        ],
      },
    ],
    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      z: 100,
      style: {
        text: '0',
        textAlign: 'center',
        fill: '#000',
        fontSize: 30,
      },
    },
  };

  myChart.setOption(option);

  function calculateAverage(data) {
    var sum = data.reduce((prev, curr) => prev + curr, 0);
    return (sum / data.length).toFixed(2);
  }

  option.graphic.style.text = calculateAverage(arr) + '分';
  myChart.setOption(option);
};
</script>
